<template>
	<view class="login-page">
		<!-- #ifdef H5 || MP-WEIXIN -->
		<view class="login-back" @click="back">
			<uni-icons type="back" size="20" color="#000000"></uni-icons>
		</view>
		<!-- #endif -->
		<view class="login-bg">
			<view class="mini-title">省心智生活</view>
			<view class="code-login">验证码登录</view>
			<view class="code-line"></view>
		</view>
		<view class="login-contaier">
			<uni-forms class="forms-item" :model="form">
				<uni-forms-item>
					<view class="phone-con">
						<view class="icon">
							<image src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/login/password.png" mode="widthFix" style="width: 48rpx"></image>
						</view>
						<view class="up-line"></view>
						<input maxlength="11" placeholder="请输入手机号" type="number" v-model="form.mobile" class="uni-input-input" placeholder-style="color: #969696;font-size:40rpx" />
					</view>
				</uni-forms-item>
				<uni-forms-item>
					<view class="code-con">
						<view class="icon">
							<image src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/login/phone.png" mode="widthFix" style="width: 48rpx"></image>
						</view>
						<view class="up-line"></view>
						<input
							maxlength="6"
							placeholder="请输入验证码"
							type="number"
							v-model="form.verificationCode"
							class="uni-input-input"
							placeholder-style="color: #969696;font-size:40rpx"
						/>
						<view class="code-btn" @click="sendCode" :style="{ cursor: isSend ? 'not-allowed' : '' }">
							<view class="" v-if="!isSend">获取验证码</view>
							<!-- 12s获取验证码 -->
							<view class="" v-else>
								<text style="color: #4883ff">{{ isNum }}s</text>
								<text>后重新发送</text>
							</view>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>

			<view class="privacy-policy">
				<checkbox-group @change="changeAll">
					<label>
						<checkbox value="cb" :checked="allChecked" style="transform: scale(0.7)" />
						<text style="color: #747474; font-weight: 400; font-size: 24rpx">已阅读并同意</text>
					</label>
				</checkbox-group>
				<text style="color: #4883ff; font-weight: 600; font-size: 24rpx" @click="privatePro(1)">《个人信息授权及保护声明》</text>
			</view>
			<view class="login-btn-image" @click="submit">
				<image src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/login/loginBtn.png" style="width: 600rpx" mode="widthFix"></image>
			</view>
		</view>
		<uni-popup ref="popupOk" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import initApi from '@/apis/init.js';
import userLoginApi from '@/apis/login.js';
import { constStore } from '@/store/const.js';
import { useUserStore } from '@/store/user.js';
import { getALPhoneNumber, getWXphoneNumber, uuIds, getPhoneNumber, handleAuthError } from '@/utils/login.js';
const isTimer = ref();
const isNum = ref(0);
const isSend = ref(false);
const allChecked = ref(false);
const agreeType = ref(1);
const popupOk = ref();
const { userInfo, token } = storeToRefs(useUserStore());
const form = reactive({
	mobile: '',
	verificationCode: '',
	platformType: ''
});
const back = () => {
	uni.navigateBack({
		delta: 1
	});
};
const sendCode = async () => {
	if (!form.mobile) return uni.utils.toast('请输入手机号！');
	if (isSend.value) return;
	const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(form.mobile);
	if (!isOkMobile) return uni.utils.toast('请输入正确的手机号');

	initApi
		.authSendSms({
			mobile: form.mobile
		})
		.then((res) => {
			console.log(res);
			if (res.code == 20000) {
				uni.utils.toast('发送成功');
				isNum.value = 60;
				isSend.value = true;
				isTimer.value = setInterval(() => {
					if (isNum.value <= 0) {
						clearInterval(isTimer.value);
						isNum.value = 0;
						isSend.value = false;
					}
					isNum.value--;
				}, 1000);
			} else {
				return uni.utils.toast(res.message);
			}
		})
		.catch((err) => {
			console.log(err);
		});
};
const ok1 = () => {
	popupOk.value.close();
	allChecked.value = true;
};
const privatePro = (type) => {
	agreeType.value = type;
	popupOk.value.open('center');
};
// 同意协议
const changeAll = (val) => {
	if (val.detail.value.length > 0) {
		allChecked.value = true;
	} else {
		allChecked.value = false;
	}
};
const loginH5 = () => {};
// 登录 weixin 1 zhifubao 2  H5  3 微信公众号  4 H5
const submit = async () => {
	if (!allChecked.value) return uni.utils.toast('请勾选《 个人信息授权及保护声明 》');
	if (!form.verificationCode) return uni.utils.toast('请输入验证码');
	// #ifdef MP-ALIPAY
	form.platformType = 2;
	// #endif
	// #ifdef MP-WEIXIN
	form.platformType = 1;
	// #endif
	// #ifdef H5
	form.platformType = 4;
	// #endif
	const loginRes = await initApi.authRegisterAndLogin({
		mobile: form.mobile,
		verificationCode: form.verificationCode,
		platformType: form.platformType
	});

	console.log(loginRes);
	if (loginRes.code == 20000) {
		uni.setStorageSync('token', loginRes.data.accessToken);
		userInfo.value.token = loginRes.data.accessToken;
		userInfo.value.mobile = loginRes.data.username;
		userInfo.value.info = loginRes.data;

		// back();

		if (loginRes.data.needAuthorizeOpenid) {
			// 有一个判断 调用不同的接口
			// #ifdef MP-ALIPAY
			my.getAuthCode({
				scopes: 'auth_base',
				success: (resOpenId) => {
					console.log(resOpenId, 'resfirst auth_base');
					const arr = {
						appId: '2021004157689007',
						code: resOpenId.authCode,
						encryptedData: null,
						iv: null
					};

					userLoginApi.alipayMaUserAuthorizeOpenid(arr).then((applyId) => {
						if (applyId.code == 20000) {
							uni.switchTab({
								url: '/pages/my/my'
							});
						} else {
							return uni.utils.toast(applyId.message);
						}
					});
				},
				fail: (err) => {
					console.log('my.getAuthCode 调用失败', err);
				}
			});
			// #endif
			// #ifdef MP-WEIXIN
			// 调用微信的接口
			wx.login({
				success(res) {
					if (res.code) {
						//发起网络请求
						console.log(res);
						const arr = {
							appId: 'wxd288833c4af82e86',
							code: res.code,
							encryptedData: null,
							iv: null
						};
						userLoginApi
							.wechatMaUserAuthorizeOpenid(arr)
							.then((openid) => {
								console.log(openid);
								if (openid.code == 20000) {
									uni.switchTab({
										url: '/pages/my/my'
									});
								} else {
									return uni.utils.toast(openid.message);
								}
							})
							.catch((err) => {
								// return uni.utils.toast(loginRes.message);
								console.log(err);
								return uni.utils.toast(err.message);
							});
					} else {
						console.log('登录失败！' + res.errMsg);
					}
				}
			});
			// #endif
		} else {
			uni.switchTab({
				url: '/pages/my/my'
			});
		}

		console.log('2222');
	} else {
		return uni.utils.toast(loginRes.message);
	}
};
</script>

<style lang="scss" scoped>
:deep(.uni-forms-item) {
	height: 112rpx;
	background-color: #ffffff;
	border-radius: 100rpx;
	box-sizing: border-box;
	.code-con {
		display: flex;
		height: 112rpx;
		.icon {
			height: 112rpx;
			padding-top: 33rpx;
			box-sizing: border-box;
			padding-left: 34rpx;
		}
		.up-line {
			width: 2rpx;
			height: 40rpx;
			background-color: #d9d9d9;
			margin-top: 36rpx;
			margin-left: 10rpx;
			margin-right: 28rpx;
		}
		.uni-input-input {
			width: 270rpx;

			height: 112rpx;
			font-size: 36rpx;
			background-color: transparent !important;
		}
		.code-btn {
			height: 112rpx;
			line-height: 112rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #b4b4b4;
		}
	}
	.phone-con {
		display: flex;
		height: 112rpx;
		.icon {
			height: 112rpx;
			padding-top: 33rpx;
			box-sizing: border-box;
			padding-left: 34rpx;
		}
		.up-line {
			width: 2rpx;
			height: 40rpx;
			background-color: #d9d9d9;
			margin-top: 36rpx;
			margin-left: 10rpx;
			margin-right: 28rpx;
		}
		.uni-input-input {
			width: 450rpx;
			height: 112rpx;
			font-size: 36rpx;
			background-color: transparent !important;
		}
	}
}
.login-contaier {
	height: 700rpx;
	width: 600rpx;
	margin: 0 auto;
	.login-btn-image {
		margin-top: 96rpx;
	}
	.privacy-policy {
		margin-top: 20rpx;
		display: flex;
		height: 50rpx;
		align-items: center;
	}
}
.login-page {
	width: 750rpx;
	margin: 0 auto;
	height: 438rpx;
	background-image: url(https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/login/headerBg.png);
	background-size: cover;
	background-repeat: no-repeat;
	box-sizing: border-box;
	// background-color: blue;
	.mini-title {
		font-family: Noto Sans Gujarati UI, Noto Sans Gujarati UI;
		font-weight: 400;
		font-size: 40rpx;
		color: #000000;
		padding-left: 70rpx;
		padding-top: 234rpx;
	}
	.code-login {
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
		padding-left: 70rpx;
		padding-top: 132rpx;
		// background-color: red;
	}
	.code-line {
		margin-bottom: 72rpx;
		margin-left: 96rpx;
		margin-top: 4rpx;
		width: 112rpx;
		height: 8rpx;
		background: linear-gradient(90deg, #3b9af8 0%, #3cd9bb 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
}
.login-back {
	z-index: 10000 !important;
	position: fixed;
	top: 0;
	left: 0;
	width: 100rpx;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	top: var(--status-bar-height);
}
</style>
<style>
page {
	background-color: #edf4ff !important;
	height: 100% !important;
}
</style>
